<template>
	<view>
		<view class="welcome">
			<text>欢迎来到</text>
			<text>杨涛餐饮店</text>
		</view>
		<!-- 方块 -->
		<view class="people-view">
			<view class="hello">您好，请选择就餐人数</view>
			<view class="table-num">桌号：{{table_number}}</view>
			<!-- 滑动 -->
			<view class="table-num table-scroll">
				<scroll-view scroll-x="true" class="scroll-view_H" :enable-flex="true">
					<view class="table-block">
						<block v-for="(item,index) in people" :key="index">
							<view @click="count(item)" :class="{activetext: index === num}">{{item}}</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<!-- 提交按钮 -->
			<view class="start-diancan" @click="order" :class="[num > -1 ? 'start-activ' : '']">开始点餐</view>
		</view>
	</view>
</template>

<script>
	const db = wx.cloud.database() // 云开发添加数据
	export default {
		name: "hello",
		data() {
			return {
				people: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				num: -1,
				table_number:0,
			}
		},
		methods: {
			// 选者人数
			count(item) {
				this.num = item - 1
				wx.setStorageSync('count-renshu', item) // 存储本地空间
			},
			// 开始点餐
			order() {
				if (this.num <= -1) {
					wx.showToast({
						title: '请选择就餐人数！',
						// mask: true, // 图层透明蒙版，防止点击
						icon: 'none',
						duration: 2000
					})
					return false
				}
				// 跳转路由
				wx.reLaunch({
					url: '/pages/home-page/page'
				})
			},
			// 是否结账
			async query_order(){
				// 查询该号桌是否已结账
				try{
					let query = await db.collection('dingdan-order').where({table_number:this.table_number,transac_status:'false'}).get()
					if(query.data.length > 0){
						wx.reLaunch({
							url:'/pages/order-details/details'
						})
					}
				}catch(e){
					wx.showToast({
						title: '查询失败,',
						mask: true, // 图层透明蒙版，防止点击
						icon: 'error',
						duration: 2000,
					})
				}
			}
		},
		// 获取小程序二维码的数据
		onLoad(e) {
			this.table_number = e.number
			console.log(2,e.number);
			wx.setStorageSync('table_num', e.number)
			this.query_order()
		}
	}
</script>

<style>
	page {
		background-image: url('https://6469-diancan-8gckycem626162ec-1254250118.tcb.qcloud.la/other/beijing-a.jpg?sign=72205ee6bbf76a00bec6d6aafbc5d7ce&t=1628957699');
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.welcome {
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 270rpx;
	}

	.welcome text {
		display: block;
		font-size: 50rpx;
	}

	.welcome text:nth-child(1) {
		font-family: monospace;
		padding-bottom: 20rpx;
	}

	/* 方块 */
	.people-view {
		background-color: #FFFFFF;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 100rpx;
		height: 550rpx;
		border-radius: 15rpx;
	}

	.hello {
		height: 80rpx;
		font-size: 35rpx;
		font-weight: bold;
		line-height: 80rpx;
		padding-left: 20rpx;
	}

	.table-num {
		font-size: 30rpx;
		padding-left: 20rpx;
	}

	.table-scroll {
		margin-top: 100rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 75rpx;
	}

	.table-block {
		display: flex;
		align-items: center;
	}

	.table-block view {
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		background-color: #f7f8f9;
		margin-right: 25rpx;
		padding: 0 70rpx;
		border-radius: 15rpx;
	}

	/* 按钮 */
	.start-diancan {
		height: 90rpx;
		line-height: 90rpx;
		background-color: #fdf4d7;
		color: #c2c2c2;
		text-align: center;
		margin: 130rpx 20rpx 0 20rpx;
		border-radius: 15rpx;
	}

	/* 点击后加上颜色*/
	.activetext {
		background-color: #f9dd89 !important;
	}

	.start-activ {
		/* background-color: #f6c947 !important; */
		color: #000000 !important;
		background: linear-gradient(to right, #f8da81, #f8d771, #f7d362, #f6cb4a) !important;
	}
</style>